<aside class="sidebar pos-absolute z-2"
       data-role="sidebar"
       data-toggle="#sidebar-toggle-3"
       id="sb3"
       data-shift=".shifted-content">
    <div class="sidebar-header" data-image="/assets/images/bg1.jpg">
        <div class="avatar">
          <img src="assets/images/avatar1.jpg" class="avatar">
        </div>
        <span class="title fg-black">Metro 4 Components Library</span>
        <span class="subtitle fg-black"> 2018 © Sergey Pimenov</span>
    </div>
    <ul class="sidebar-menu">
        <li><a routerLink="/"><span class="mif-home icon"></span>Home</a></li>
        <li><a routerLink="/blog"><span class="mif-books icon"></span>Blogs</a></li>
        <li><a routerLink="/admin"><span class="mif-files-empty icon"></span>Write Blog</a></li>
        <li class="divider"></li>
        <li><a><span class="mif-images icon"></span>Icons</a></li>
    </ul>
</aside>
<div class="shifted-content h-100 p-ab">
    <div class="app-bar pos-absolute bg-red z-1" data-role="appbar">
        <button class="app-bar-item c-pointer" id="sidebar-toggle-3">
            <span class="mif-menu mif-3x fg-white"></span>
        </button>
        <a href="#" class="app-bar-item fg-white">Moonlight</a>

    </div>

    <div class="h-100 net-bg" style="min-height: calc(100vh);">
    <!-- Content goes here -->
    <router-outlet></router-outlet>

    </div>
</div>

